<template>
    <div class="wrapper">

    <!-- header部分 -->
    <header>
        <p>商家列表</p>
    </header>
    <page-rollback></page-rollback>
    <!-- 商家列表部分 -->
    <ul class="business">
        <!--使用v-for进行循环，避免一直重复li-->
        <li v-for="item in businessArr" :key="item.id">
            <!-- 右上角红点 -->
            <div class="business-img" @click="toBusinessInfo(item.businessId)">
                <!--v-bind:，可以用:缩写，v-bind进行绑定，简单而言，不加v-bind，item.businessImg会当成字符串解析，加入冒号，会当成js去解析，显示图片-->
                <img :src="item.businessImg">
                <!--v-show为false不显示，为true显示-->
                <div class="business-img-quantity" v-show = "item.quantity>0">{{ item.quantity }}</div>
            </div>
            <div class="business-info">
                <h3>{{item.businessName}}</h3>
                <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
                <p>{{item.businessExplain}}</p>
            </div>
        </li>
    </ul>
    <!-- 底部菜单部分 -->
    <footer-page></footer-page>
    </div>
    
</template>

<script>
import FooterPage from '../components/FooterPage.vue';
import PageRollback from '@/components/PageRollback.vue';

export default{
    name:'BusinessList',
    data(){
        //通过在 data 函数中定义这些属性，Vue 将会将它们转换为响应式数据，这意味着当数据发生变化时，相关的界面部分将会自动更新。
        return{
            // 请注意，data 函数必须返回一个对象，用于存储组件的数据。
            // 从当前路由的查询参数中获取 orderTypeId 的值，并将其赋给 orderTypeId 属性
            // $route.query 是 Vue Router 提供的一个对象，用于访问当前路由的查询参数
            // 接收从首页路由传过来的参数
            orderTypeId: this.$route.query.orderTypeId,
            // 创建一个空数组，用于存储业务数据，初始为空
            // 使得商家列表类的数据是动态的
            businessArr:[],
            user:{}
        }
    },
    created(){
        this.user = this.$getSessionStorage('user');
        //不需要操作dom，所以可以放在这个生命周期里面
        // this指这个对象，$axios特指axios实例，post()使用post方法发送请求
        // ../..是请求的url，这里表示连接后端的接口，后面整个指发送的数据，使用qs实例调用stringify方法发送
        // { orderTypeId: this.orderTypeId }数据对象，{}默认一个对象，前一个orderTypeId表示属性，后一个表示具体值
        let url = `/BusinessController/listBusinessByOrderTypeId/${this.orderTypeId}`;
        this.$axios.get(url)
        // then()用于处理前一个 Promise 成功解决后的操作。它接收一个回调函数作为参数
        // response 是特指请求成功后传递的数据
        .then(response =>{
            //直接这样this.businessArr = response.data是获取不到的
            // console.log(response.data)
            this.businessArr = response.data.result;
			// this.businessArr = response.data;
             //判断是否登录
            if(this.user != null){
                this.listCart();
            }
        })
        //catch()用于捕获错误情况，=>箭头函数将错误对象作为参数（error）传递给{...}函数
        .catch(error => {
            console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
        });
    },
    components:{
        FooterPage,
        PageRollback
    },
    methods:{
        listCart(){
            let url_cart = `/CartController/listCart/${this.user.token.token}`;
            this.$axios.get(url_cart) 
            .then(response => {
                let cartArr = response.data.result;
                // console.log(response.data)
                //遍历所有食品列表
                for(let businessItem of this.businessArr){
                    businessItem.quantity = 0;
                    for(let cartItem of cartArr){
                        if(cartItem.businessId === businessItem.businessId){
                            businessItem.quantity += cartItem.quantity;
                        }
                    }
                }
                this.businessArr.sort();
      
            })
            .catch(error =>{
                console.error(error)
            });
        },
        toBusinessInfo(businessId){
            this.$router.push({path:'/businessInfo',query:{businessId:businessId}});
        }
    }
}
</script>


<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        /* 固定定位 */
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 商家列表部分 ******************/
    .wrapper .business {
        width: 100%;
        margin-top: 12vw;
        padding-bottom: 14vw;
    }

    .wrapper .business li {
        width: 100%;
        box-sizing: border-box;
        padding: 2.5vw;
        border-bottom: solid 1px #DDD;
        user-select: none;
        cursor: pointer;

        display: flex;
        align-items: center;
    }

    .wrapper .business li .business-img {
        position: relative;
    }

    .wrapper .business li .business-img img {
        width: 20vw;
        height: 20vw;
    }

    .wrapper .business li .business-img .business-img-quantity {
        width: 5vw;
        height: 5vw;
        background-color: red;
        color: #fff;
        font-size: 3.6vw;
        border-radius: 2.5vw;

        display: flex;
        justify-content: center;
        align-items: center;

        /*设置成绝对定位，不占文档流空间*/
        position: absolute;
        right: -1.5vw;
        top: -1.5vw;
    }

    .wrapper .business li .business-info {
        margin-left: 3vw;
    }

    .wrapper .business li .business-info h3 {
        font-size: 3.8vw;
        color: #555;
    }

    .wrapper .business li .business-info p {
        font-size: 3vw;
        color: #888;
        margin-top: 2vw;
    }

    
</style>